@import "mixins/utility";
@import "mixins/palette";
@import "global";

form {
  position: relative;
  display: block;
  width: 100%;
}

form {
  h1 {
    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif!important;
    letter-spacing: normal!important;
    margin: 0 0 16px!important;
    color: $main-color;
    padding: 0;
  }

  h2 {
    display: block;
    font-weight: bold;
    font-size: 16px !important;
    color: $main-color;
    padding: 20px 0 10px;
  }
}

  .form-control {
    display: inline-block;
    width: 100%;
    height: $form-control-height;
    background: $silver-25;
    border-radius: $border-radius;
    border: 1px solid $silver-25;
    color: $text-color;
    font-size: $font-size-form-control;
    padding: $padding-form-control;
    transition: all 0.3s ease;

    &:focus {
      background: $white-text-color;
      border: 1px solid $text-color;
      box-shadow: none;
      outline: $text-color solid 1px!important;
      color: $text-color;
    }
  }

  .form-control-input-button {
    display: inline-block;
    position: relative;
    .form-control {
      padding-right: 32px!important;
    }
    button {
      position: absolute;
      right: -10px;
      top: 0;
      outline: none!important;
      border: none!important;
      background: none!important;
      color: $text-color;

      i {
        font-size: 23px;
        position: relative;
        top: -1px;
      }
    }
  }

  .form-control-input-icon {
    display: inline-block;
    position: relative;
    .form-control {
      padding-left: 32px!important;
    }
    i {
      position: absolute;
      left: 15px;
      top: 15px;
    }
  }

  .form-field {
    margin-bottom: 7px;
    position: relative;
    label:not(.mat-checkbox-layout) {
      display: inline-flex;
      font-weight: 500;
      font-size: 13px;
      color: $main-color;
      justify-content: flex-end;
      justify-self: center;
      width: 28%;
      padding: 15px 15px 0 0;
    }
    ng-select {
      display: inline-flex;
      width: 72%;
      position: absolute;
      top: 3px;
    }
    input {
      display: inline-flex;
      width: 72%;
    }
    button {
      padding: 0;
      margin-right: 25px;
      margin-top: 10px;
    }
  }

  form button, .btn-control {
    background: $black;
    border-radius: $border-radius;
    color: $white-text-color;
    outline: none;
    border: none;
    transition: all 0.3s ease;
    padding: $form-button-padding;

    &:hover {
      opacity: 0.6;
    }

    .rounded-button {
      border-radius: 50%;
      background: $silver-dark;
      color: $white-text-color;
    }

    &.toggle-button {
      background: $white-text-color;
      color: $text-color;
      padding: $toggle-button-padding;
      border: 1px solid $table-text;
      font-size: 15px;

      i {
        font-size: 20px;
        position: relative;
        top: 2px;
      }

      &.toggled {
        background: $silver-25;
        border: 1px solid $silver-25;
      }
    }
  }

  .mat-button-disabled {
    background: $silver-dark;
  }

  .btn-right-margin {
    margin-right: 20px;
  }

  .toggle-button {
    margin-right: 10px;
  }

  .mat-checkbox-layout {
    width: auto!important;
    padding-right: 3px!important;
  }

  .mat-checkbox-frame {
    border-radius: 0!important;
    border-width: 1px!important;
  }
  .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
  .mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
  .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
  .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background: $black;
  }
  .mat-checkbox-inner-container {
    width: 18px!important;
    height: 18px!important;
  }

  .mat-menu-panel {
    width: 300px;
    min-width: 300px;
    max-width: 500px;
    margin-top: 10px;
    border: 1px solid $silver-75;
    border-radius: $context-menu-border-radius;

    .mat-menu-item {
      line-height: 36px;
      height: 36px;
      padding: 0 20px;
      font-size: 15px;
    }
  }

.input-inner-button {
  position: absolute;
  right: -14px;
  top: 0;
  width: initial;
  color: $text-color;
  display: inline-block;
  background: none;
  i {
    display: inline-block;
    color: $text-color;
    font-size: 16px;
  }
}
